<template>
  <view>
    <view class="search-list">
      <view
        v-for="(item, index) in list"
        @click="handleSearch(index, item)"
        :key="index"
        :class="['list-item', searchConfig.activeIndex === index || item?.value?.value || (item.value && item.value.length) ? 'list-item-active' : '']"
      >
        <text v-if="item.key == 'business_district'">{{ searchConfig.searchTitle ? searchConfig.searchTitle : item.title }}</text>
        <text v-else>{{ item.title }}</text>
        <template v-if="item.key == 'business_district' || item.key == 'districts'">
          <image v-if="item.icon === 1" :src="$CDN('/customer/static/images/icons/arrow-down.png')" title="未选中-down" />
          <image v-if="item.icon === 2" :src="$CDN('/customer/static/images/icons/down.png')" title="选中-up" />
          <image v-if="item.icon === 3" class="tranform" :src="$CDN('/customer/static/images/icons/down.png')" title="选中-down" />
        </template>
        <template v-if="item.key == 'price'">
          <image v-if="item.value === ''" :src="$CDN('/common/static/images/default-sort@3x.png')" title="empty" />
          <image v-else-if="item.value === 'showMinPrice:asc'" :src="$CDN('/common/static/images/active-up@3x.png')" title="up" />
          <image v-else :src="$CDN('/common/static/images/active-down@3x.png')" title="down" />
        </template>
      </view>
    </view>
    <view
      v-if="searchConfig.showFixed"
      class="fixed-search"
      :style="{ height: `calc(100vh - ${$Platform.navbar}px)`, top: `${$Platform.navbar + fixedHeiht}px` }"
      @click="handleClose"
    >
      <view class="fixed-container" @click.stop="stop">
        <view v-for="(item, index) in list" :key="index">
          <template v-if="index === 0 && searchConfig.activeIndex == 0">
            <area-group :options="item.options" :propsValue="item.value" @emit-data="emitData"></area-group>
          </template>
          <template v-if="index === 3 && searchConfig.activeIndex == 3">
            <filter-group v-if="searchConfig.activeIndex === 3" :options="list[3].options" :propsValue="list[3].value" @emit-filterData="emitFilterData"></filter-group>
          </template>
        </view>
        <!-- <area-group v-if="searchConfig.activeIndex === 0" :options="list[0].options" :value="list[0].value" @emit-data="emitData"></area-group> -->
      </view>
    </view>
    <!-- <view
      v-if="searchConfig.showFixed"
      class="fixed-search"
      :style="{ height: `calc(100vh - ${$Platform.navbar}px)`, top: `${$Platform.navbar + fixedHeiht}px` }"
      @click="handleClose"
    >
      <view class="fixed-container" @click.stop="stop">
        <area-group v-if="searchConfig.activeIndex === 0" ref="ref-area" :options="list[0].options" :value="list[0].value" @emit-data="emitData"></area-group>
        <filter-group v-if="searchConfig.activeIndex === 3" :options="list[3].options" :value="list[3].value" @emit-filterData="emitFilterData"></filter-group>
      </view>
    </view> -->
  </view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import areaGroup from './area-group'
import filterGroup from './filter-group'
export default {
  name: 'search',
  components: {
    areaGroup,
    filterGroup,
  },
  mixins: [],
  props: {
    // areaData: {
    //   type: Array,
    //   default: () => [],
    // },
    // filterData: {
    //   type: Array,
    //   default: () => [],
    // },
    // 默认浮顶的高度为容器自身高度，如果拼接其他元素模块则添加对应的高度
    fixedHeiht: {
      type: Number,
      default: 48,
    },
    list: {
      type: Array,
      default: () => {},
    },
    isNomore: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      searchConfig: {
        activeIndex: '',
        showFixed: false,
        searchTitle: '',
        // list: [
        //   { title: '全部区域', key: 'business_district', options: [], value: [], icon: 1 },
        //   { title: '离我最近', key: 'distance', icon: 0 },
        //   { title: '价格排序', key: 'price', icon: 0 },
        //   { title: '房源筛选', key: 'districts', options: [], value: [], icon: 1 },
        // ],
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions('location', ['GetLocation']),
    moveStop() {},
    async handleSearch(index, item) {
      if (this.isNomore == 'loading') return
      this.$emit('emit-change-icon', index)
      this.searchConfig.activeIndex = index
      if (index === 0 || index === 3) {
        this.searchConfig.showFixed = true
      } else if (index === 1) {
        await this.GetLocation()
        // 距离和价格只能同时存在一种，所以特殊处理
        const value = !item.value ? 'distance:asc' : ''
        this.$emit('emit-change-data', { index: index, value })
        this.searchConfig.showFixed = false
        // 清空价格排序
        this.list[2].value = ''
      } else if (index === 2) {
        let value = ''
        switch (item.value) {
          case '':
            value = 'showMinPrice:asc'
            break
          case 'showMinPrice:asc':
            value = 'minPrice:desc'
            break
          case 'minPrice:desc':
            value = 'showMinPrice:asc'
            break
        }
        item.value = value
        this.$emit('emit-change-data', { index: index, value })
        this.searchConfig.showFixed = false
      }
      this.$emit('scroll', index !== 0 && index !== 3)
      // if (index == 0 || index === 3) {
      //   this.$emit('scroll', index !== 0 && index !== 3)
      // }
    },
    stop() {},
    handleClose() {
      this.$emit('scroll', true)
      this.$emit('emit-change-icon', '')
      this.searchConfig.activeIndex = ''
      this.searchConfig.showFixed = false
    },
    emitData({ value, searchTitle }) {
      this.searchConfig.searchTitle = searchTitle
      this.$emit('emit-change-data', { index: 0, value })
      this.handleClose()
    },
    emitFilterData(value) {
      console.log('value', value)
      this.$emit('emit-change-data', { index: 3, value })
      this.handleClose()
    },
  },
}
</script>

<style lang="scss" scoped>
.search-list {
  position: sticky;
  width: 100%;
  box-sizing: border-box;

  background: white;
  padding: 16px;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  display: flex;
  .list-item {
    color: #333333;
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    text {
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
    }
    image,
    image {
      width: 16px;
      height: 16px;
    }
    .tranform {
      transform: rotate(180deg);
    }
  }
  .list-item-active {
    color: $uv-primary;
    font-weight: 600;
  }
}
.fixed-search {
  // z-index: 10;
  // position: fixed;
  width: 100%;
  background: #7a7a7a;
  top: 112px;
  // position: fixed;
  .fixed-container {
    width: 100%;
    height: 1000rpx;
    // height: 60vh;
    border-top: 1px solid #f5f5f5;
    background: #f5f5f5;
    box-sizing: border-box;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  // .fixed-button {
  //   padding: 32rpx;
  //   width: 100%;
  //   box-sizing: border-box;
  //   background: white;
  //   display: flex;
  //   justify-content: space-between;
  //   .reset {
  //     padding: 22rpx 52rpx;
  //     background: #f5f5f5;
  //     border-radius: 40rpx;
  //     color: #666666;
  //   }
  //   .confirm {
  //     background: $uv-primary;
  //     color: white;
  //     border-radius: 40rpx;
  //     padding: 22rpx 226rpx;
  //   }
  // }
}
</style>
